<?php
/**
 * RabbitCMS
 *
 */
?>
<?php 
$this->headTitle()->prepend($this->translate('page_add_page_title').' - ');
$this->headLink()->appendStylesheet($this->APP_STATIC_SERVER . '/skins/admin/default/css/form.css');
$this->headScript()
        ->appendFile($this->APP_STATIC_SERVER . '/js/jquery.validate.js')
        ->appendFile($this->APP_STATIC_SERVER . '/js/tomato.util.js')
                ->appendFile($this->APP_STATIC_SERVER . '/js/tinymce/tiny_mce.js');
?>

<!--have some code remove-->
 <div id="r-heading">
        <img src="<?php echo $this->APP_STATIC_SERVER . '/skins/admin/default/images/page.png'; ?>" alt=""/>
        <span><?php echo $this->translate('page_add_breadcrumb'); ?></span>
    </div>

<?php
    $message = $this->flashMessenger();
    if ($message) {
 ?>
        <div id="message"><ul><?php echo $message; ?></ul></div>
<?php } ?>
<form id="frmAddPage" class="ae-form" enctype="application/x-www-form-urlencoded" accept-charset="utf-8" action="<?php echo $this->url(array(), 'page_page_add'); ?>" method="post">
        <div style="width: 60%; float: left;">
            <div class="row">
                <label for="language"><?php echo $this->translate('page_language'); ?></label>
                <?php echo $this->languageSelector(array('name' => 'language')); ?>
            </div>
            <div class="row">
                <label><?php echo $this->translate('page_source_item'); ?>:</label>
                <div class="translatable translationSourceItems">
                      <?php
                      echo $this->translatablePage(array(
                                              'id'       => 'sourceItem',
                                              'name'     => 'sourceItem',
                                              'selected' => (null == $this->sourcePage) ? null : $this->sourcePage->id,
                                              'disabled' => (null == $this->sourcePage) ? null : $this->sourcePage->id,
                                        ), $this->lang);
                      ?>
                </div>
		</div>
            <div class="row">
                <label for="name" class="required"><?php echo $this->translate('page_name'); ?></label>
                <input type="text" name="name" id="name" value="" size="50" />
            </div>
            <div class="row">
                <label for="slug" class="required"><?php echo $this->translate('page_slug'); ?></label>
                <input type="text" name="slug" id="slug" value="" size="50" />
            </div>
            
            <div class="row">
                <label for="parent_id"><?php echo $this->translate('page_parent'); ?></label>
                <div class="translatable">
                <?php echo $this->pageSelect(array('id' => 'parentId', 'name' => 'parentId')); ?>
                </div>
            </div>
            <div class="row">
                <label for="description" ><?php echo $this->translate('page_description'); ?></label>
                <textarea name="description" id="description" rows="24" cols="100"></textarea>
            </div>
            <div class="row">
                <label for="content" ><?php echo $this->translate('page_content'); ?></label>
                <textarea name="content" id="content" rows="50" cols="100"></textarea>
            </div>

        </div>
        <div class="r-right" style="width: 35%; float: right;">
            <div class="box">
                <div class="b-title"><?php echo $this->translate('page_seo') ?></div>
                <div class="b-container">
                    <div>
                        <label for="meta_title" ><?php echo $this->translate('page_meta_title'); ?></label>
                        <input type="text" name="meta_title" id="meta_title" value="" size="50" />
                    </div>
                    <div>
                        <label for="meta_description" ><?php echo $this->translate('page_meta_description'); ?></label>
                        <textarea name="meta_description" id="meta_description" rows="5" cols="38"></textarea>
                    </div>
                    <div>
                        <label for="meta_keywords" ><?php echo $this->translate('page_meta_keywords'); ?></label>
                        <input type="text" name="meta_keywords" id="meta_keywords" value="" size="50" />
                    </div>
                </div>
            </div>
            <div class="box">
                <div class = "b-title">
                    <?php echo $this->translate('page_multimedia') ?>
                </div>
                <div class="b-container">
                    <?php
                    echo
                    $this->helperLoader('upload')->uploader('news',
                            array('extension' => '*.jpg;*.jpeg;*.png;*.gif', 'fileExt' => '*.jpg;*.jpeg;*.png;*.gif', 'multi' => true, 'auto' => true, 'simUploadLimit' => 5, 'sizeLimit' => 1024 * 1024 * 5),
                            array('onComplete' => 'onUploadComplete','onError' => 'onUploadError'));
                    ?>
                    <div style="margin-top: 10px;" class="photos"><ul id="photos"></ul></div>
                </div>
            </div>
            <div class="row">
                <input type="submit" name="submit" id="submit" value="<?php echo $this->translate('common_submit'); ?>" class="button" />
                <input type="reset" name="reset" id="reset" value="<?php echo $this->translate('common_reset'); ?>" class="button" />
            </div>
        </div>
    </form>

<script type="text/javascript">
/**
 * Init TinyMCE
 */
 tinyMCE.init({
	theme: 'advanced',
	theme_advanced_toolbar_location: 'top',
	theme_advanced_toolbar_align: 'left',
	width: '600',
	height: '225',
	mode: 'exact',
	elements: 'description',
	content_css: '<?php echo $this->APP_STATIC_SERVER; ?>/skins/<?php echo $this->APP_TEMPLATE; ?>/<?php echo $this->APP_SKIN; ?>/default.css',
	relative_urls: false,
	remove_script_host: false
});
 
tinyMCE.init({
	theme: 'advanced',
	plugins: 'safari,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template',
	theme_advanced_buttons2: 'cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo',
	theme_advanced_buttons3: 'link,unlink,anchor,image,cleanup,code,|,preview,|,forecolor,backcolor',
	theme_advanced_buttons4: 'tablecontrols', //"tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
	theme_advanced_toolbar_location: 'top',
	theme_advanced_toolbar_align: 'left',
	width: '600',
      height: '400',
	mode: 'exact',
	elements: 'content',
	content_css: '<?php echo $this->APP_STATIC_SERVER; ?>/skins/<?php echo $this->APP_TEMPLATE; ?>/<?php echo $this->APP_SKIN; ?>/default.css',
	relative_urls: false,
	remove_script_host: false
});

/**
 * Upload handler
 */
function onUploadComplete(event, ID, fileObj, response, data) {
	var images = $.evalJSON(response);

	var presentImage = $('<img/>');
	$(presentImage).attr('src', images.thumbnail.url)
		.attr('width', '100').attr('height', '100')
		.attr('style', 'cursor: pointer');
	var select = $('<select/>');
	$(select).attr('width', '100');
	$('<option/>').attr('value', '').html('---').appendTo(select);

	for (var thumb in images) {
		$('<option/>').attr('value', images[thumb].url).html(images[thumb].size).appendTo(select);
	}
	$(select).change(function() {
		if ($(this).val() != '') {
			insertImage($(this).val());
		}
	});

	$('<li/>').append(presentImage).append($('<br/>')).append(select).appendTo($('#photos'));
};

/**
 * Insert image to TinyMCE editor at current position
 * @param string url The image url
 */
function insertImage(url) {
	tinyMCE.getInstanceById('content').execCommand('mceInsertContent', false, '<img src="' + url + '" />');
};

$(document).ready(function() {
	/**
	 * Validate form
	 */
	$.validator.addMethod('slug', function(value) {
		var regex = new RegExp(/^[a-z0-9\-]+$/);
		if (value.match(regex)) {
			return true;
		} else {
			return false;
		}
	});
	
	$('#frmAddPage').validate({
		rules: {
			name: {
				required: true,
		  		maxlength: 255
			},
			slug: {
		  		required: true,
		  		slug: true,
		  		maxlength: 255
			}
	    },
	    messages: {
	    	name: {
	        	required: "<?php echo $this->translator('page_name_required'); ?>",
				maxlength: "<?php echo $this->translator('page_name_maxlength'); ?>"
			},
			slug: { 
	        	required: "<?php echo $this->translator('page_slug_required'); ?>",
	        	slug: "<?php echo $this->translator('page_slug_invalid'); ?>",
	        	maxlength: "<?php echo $this->translator('page_slug_maxlength'); ?>"
	    	}
		}
	});

	/**
	 * Automatically create slug once user enter the title
	 */
	$('#name').bind('change', function() {
		$('#slug').val(Tomato.Util.generateSlug($(this).val()));
	});
});
</script>
